<!--
 * @Date         : 2023-11-06 21:37:46
 * @LastEditTime : 2023-11-20 22:15:00
 * @description  : searchPage
-->
<template>
  <view class="searchPage">
    <scroll-view class="scrollview" :scroll-y="true" @scroll="onscroll">
      <cl-header
        :title="detail.name"
        :isOccupy="false"
        :scrollTop="scrollTop"
        :transparent="true"
        :isBack="true"
      ></cl-header>
      <u-swiper :list="detail.cover" height="200" :indicator="true"></u-swiper>
      <div class="onlineDetail">
        <div class="main-content">
          <u--image
            :showLoading="true"
            :src="detail.cover"
            width="100%"
            height="350rpx"
            radius="18rpx"
          ></u--image>
          <div class="name">
            {{ detail.name || "" }}
            <!-- <text class="name-tag">共13课时</text> -->
          </div>
          <div class="content">
            <u-read-more showHeight="200" ref="uReadMore">
              <!-- <rich-text :nodes="detail.content"></rich-text> -->
              <div class="desc">{{ detail.content || "" }}</div>
            </u-read-more>
          </div>
          <div class="name">
            主讲老师
            <text class="name-tag">{{ detail.teacher || "" }}</text>
          </div>
          <div class="content">
            <div class="desc">
              {{ detail.profile || "" }}
            </div>
          </div>
          <!-- 报名 -->
          <div class="entry" @click="onOpen">
            <div class="left">报名进行中</div>
            <div class="center">
              <div>
                {{ detail.start_date || "" }} - {{ detail.end_date || "" }}
              </div>
              <div>（距报名结束剩{{ detail.end_day || "" }}天）</div>
            </div>
            <div class="right">已报名{{ detail.apply_num || "" }}人</div>
          </div>
          <div>
            <u--image
              :showLoading="true"
              @click="onPage"
              :src="require('@/assets/entry-name.png')"
              width="100%"
              height="108rpx"
              radius="18rpx"
            ></u--image>
          </div>
        </div>

        <!-- <hb-comment
          ref="hbComment"
          @add="add"
          @del="del"
          @like="like"
          @focusOn="focusOn"
          :deleteTip="'确认删除？'"
          :cmData="commentData"
          v-if="commentData"
        ></hb-comment> -->
      </div>
    </scroll-view>
    <u-modal
      :show="authShow"
      @confirm="confirm"
      @cancel="cancel"
      confirmText="去认证"
      :showCancelButton="true"
      ref="uModal"
      title="提示"
      content="同学，想要报名请先去认证！"
      :asyncClose="true"
    ></u-modal>
    <u-popup :show="show" mode="bottom" :round="10" @close="close">
      <view class="entry-popup">
        <div class="title">课程报名</div>
        <div class="row">
          <div class="left">
            <u-icon name="account-fill" color="#2979ff" size="28"></u-icon>
          </div>
          <div class="right">
            <u--input
              placeholder="请输入姓名"
              border="bottom"
              v-model="value"
              clearable
            ></u--input>
          </div>
        </div>
        <div class="row">
          <div class="left">
            <u-icon name="bookmark" color="#2979ff" size="28"></u-icon>
          </div>
          <div class="right">
            <u--input
              placeholder="请输入学校"
              border="bottom"
              v-model="value"
              clearable
            ></u--input>
          </div>
        </div>
        <div class="row">
          <div class="left">
            <u-icon name="phone" color="#2979ff" size="28"></u-icon>
          </div>
          <div class="right">
            <u--input
              placeholder="请输入手机号"
              border="bottom"
              v-model="value"
              clearable
            ></u--input>
          </div>
        </div>

        <view class="botton">提交你的报名信息</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { get_course_details } from "@/apis/modules/user";
import hbComment from "@/components/hb-comment_1.2.2/components/hb-comment/hb-comment.vue";
import { addSign, delComment } from "apis/modules/user";
import { getStorage } from "utils/auth";
export default {
  name: "onlineDetail",
  components: { hbComment },
  data() {
    return {
      authShow: false,
      value: "",
      show: false,
      commentData: "",
      scrollTop: 0,
      searchValue: "",
      detail: {},
    };
  },
  onLaunch() {},
  onShow() {
    console.log();
  },
  onLoad() {
    this.getDourseDetails();
  },
  methods: {
    confirm() {
      this.$Router.push({
        path: "/pages/authentication/authentication",
      });
      this.authShow = false;
    },
    cancel() {
      this.authShow = false;
    },
    onPage() {
      let { course_id } = this.$Route.query;
      this.$Router.push({
        path: `/pagesA/signin/signin?course_id=${course_id}`,
      });
    },
    onscroll(data) {
      this.scrollTop = data.detail.scrollTop;
    },
    add(data) {
      console.log(data, "add");
    },
    del(data) {
      console.log(data, "del");
    },
    like(data) {
      console.log(data, "like");
    },
    focusOn(data) {
      console.log(data, "focusOn");
    },
    close() {
      this.show = false;
    },
    onOpen() {
      let { course_id } = this.$Route.query;
      let userinfo = getStorage("userInfo");
      if (userinfo?.is_auth == 1) {
        addSign({ course_id }).then((res) => {
          uni.showToast({
            title: "报名成功",
            duration: 2000,
          });
          setTimeout(() => {
            this.getDourseDetails();
          }, 1500);
        });
      } else {
        this.authShow = true;
      }
      // this.show = true;
    },
    onWork() {
      this.$Router.push({
        path: "/pages/work/work?course_id=11",
      });
    },
    getDourseDetails() {
      let { course_id } = this.$Route.query;
      get_course_details({ course_id }).then((res) => {
        res["start_date"] = res["start_date"].split(" ")[0];
        res["end_date"] = res["end_date"].split(" ")[0];
        this.detail = res;
        this.$nextTick(() => {
          this.$refs.uReadMore.init();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchPage {
  height: 100vh;
  background: #eeeeee;
  .scrollview {
    height: 100%;
    overflow: hidden;
  }
  .onlineDetail {
    background: #eeeeee;
    padding: 30rpx;
    .main-content {
      background: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      .name {
        margin-top: 20rpx;
        font-size: 24rpx;
        font-weight: 800;
        color: #333333;
        .name-tag {
          margin-left: 20rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #666666;
        }
      }
      .tag {
        font-size: 18rpx;
        font-weight: bold;
        color: #999999;
        text-align: left;
        margin: 20rpx 0;
        .tag-n {
          padding: 4rpx 20rpx;
          height: 31rpx;
          background: #eeeeee;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          opacity: 1;
        }
        .zcr {
          font-size: 20rpx;
          font-weight: bold;
          color: #999999;
          margin: 20rpx;
        }
        .hz {
          height: 27rpx;
          padding: 4rpx 20rpx;
          background: #ee4d02;
          border-radius: 30rpx 30rpx 30rpx 30rpx;
          width: 62rpx;
          font-weight: 400;
          color: #ffffff;
          line-height: 27rpx;
        }
      }
      .content {
        margin-top: 20rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #666666;
        .desc {
          font-size: 24rpx;
          font-weight: bold;
          color: rgba(102, 102, 102, 0.77);
          line-height: 50rpx;
        }
      }
      .label {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        margin-top: 40rpx;
      }
      .row {
        margin-top: 20rpx;
        min-height: 88rpx;
        overflow: auto;
      }
      .row-item {
        flex-shrink: 0;
        margin-right: 20rpx;
      }
      .entry {
        width: 630rpx;
        height: 98rpx;
        background: #ffffff;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
        border-radius: 18rpx 18rpx 18rpx 18rpx;
        opacity: 0.98;
        margin: 40rpx auto;
        display: flex;

        .left {
          flex-shrink: 0;
          width: 158rpx;
          height: 98rpx;
          background: #f4986f;
          border-radius: 18rpx 0rpx 0rpx 18rpx;
          opacity: 0.98;
          font-size: 24rpx;
          font-weight: bold;
          color: #ffffff;
          line-height: 98rpx;
          text-align: center;
        }
        .center {
          flex: 1;
          font-size: 18rpx;
          font-weight: bold;
          color: rgba(102, 102, 102, 0.64);
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: column;
          box-sizing: border-box;
          padding: 20rpx;
        }
        .right {
          flex-shrink: 0;
          height: 98rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #e04411;
          line-height: 98rpx;
          margin-right: 20rpx;
        }
      }
    }
  }
}
.displayFlex {
  display: flex;
}

.entry-popup {
  height: 70vh;
  padding: 60rpx 70rpx;
  .title {
    text-align: center;
    font-size: 36rpx;
    font-weight: 800;
    color: #333333;
  }
  .row {
    display: flex;
    align-items: center;
    margin: 100rpx 0;
    .left {
      flex-shrink: 0;
      margin-right: 20rpx;
    }
    .right {
      flex: 1;
    }
  }
  .botton {
    width: 625rpx;
    height: 102rpx;
    background: #e04411;
    border-radius: 58rpx 58rpx 58rpx 58rpx;
    opacity: 1;
    font-size: 32rpx;
    line-height: 102rpx;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
  }
}
</style>
